<template>
    <div>
            <wxc-minibar title="热门标签"
                         background-color="#009ff0"
                         text-color="#FFF"
                         right-text="更多+"
                         @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                         @wxcMinibarRightButtonClicked="minibarRightButtonClick"></wxc-minibar>
        <!--<wxc-searchbar ref="wxc-searchbar"-->
                         <!--theme="grey"-->
                       <!--placeholder="搜索标签"-->
                       <!--cancel-label="取消"-->
                       <!--text-color="#fff"-->
                         <!--@wxcSearchbarCancelClicked="wxcSearchbarCancelClicked"-->
                         <!--@wxcSearchbarInputOnInput="wxcSearchbarInputOnInput"-->
        <!--&gt;</wxc-searchbar>-->
        <div class="search">
            <input type="text" placeholder="请输入热门标签" class="searchBox" v-model="searchVal">
            <text class="btn">搜索</text>
        </div>
        <scroller>
            <div class="body-body">
                <text class="big-text">我的标签</text>
                <text v-if="xianshi_biao" class="biao-text">{{text_my}}</text>
                <div class="body-hd">
                    <text class="hd-text" v-for="item in mybiaoqiao">{{item}}</text>
                </div>

                <div class="body-conent">
                    <div class="body-conent-item" >
                        <text class="big-text" @click="toggle4">{{text}}</text>
                        <hr/>
                        <div class="big-item" v-if="xianshi4">
                            <text class="big-item-text" v-for='(item,index) in list'
                                  @click="biaoqianClick(item.name,index)"
                                  :key="index">{{item.name}}</text>
                        </div>
                    </div>
                </div>
            </div>
        </scroller>
    </div>
</template>

<script>
    import { WxcMinibar } from 'weex-ui';
    const modal = weex.requireModule('modal');
    import { WxcSearchbar } from 'weex-ui'
    export default {
        components: { WxcSearchbar,WxcMinibar },
        data:{
            value: '',
            fouse:false,
            xianshi:true,
            xianshi2:true,
            xianshi3:true,
            xianshi4:true,
            xianshi_biao:true,
            searchVal:'',
            text:'收起标签-',
            text_my:'您暂未选择任何标签',
            mybiaoqiao:[],
            goodsList:[
                //假数据
                {name:"王者荣耀",id:'0'},
                {name:"吃鸡",id:'1'},
                {name:"qq飞车",id:'2'},
                {name:"刘亦菲化妆",id:'3'},
                {name:"刘能跑步",id:'4'},
                {name:"追剧",id:'5'},
                {name:"美食",id:'6'},
                {name:"最爱酸辣粉",id:'7'},
                {name:"小米",id:'8'},
                {name:"苹果婊",id:'9'},
                {name:"杨幂化妆",id:'10'},
                {name:"王者峡谷",id:'11'},
                {name:"烤羊腿",id:'12'},
                {name:"旅游",id:'13'},
                {name:"游北京",id:'14'},
                {name:"逛上海",id:'15'},
                {name:"校园青春",id:'16'},
                {name:"校园爱情",id:'17'},
                {name:"英雄联盟",id:'18'},
                {name:"雄霸天下",id:'19'},
                {name:"韩剧控",id:'20'},
                {name:"韩国游",id:'21'},
                {name:"xionG",id:'22'},
                {name:"ZHONG",id:'23'},
                {name:"Xiong",id:'24'},
                {name:"zhonG",id:'24'},
                {name:"QQ炫舞",id:'25'},
            ],
        },
        watch:{


        },
        computed:{
            list: function(){
                var _this = this;
                var arrByZM = [];
                for (var i=0;i<this.goodsList.length;i++){
                    if(this.goodsList[i].name.search(this.searchVal.toLowerCase()) != -1||this.goodsList[i].name.search(this.searchVal.toUpperCase()) != -1){
                        arrByZM.push(this.goodsList[i]);
                    }
                }
                return arrByZM;
            },
        },
        methods:{
            toggle(){
                this.xianshi=!this.xianshi
            },
            toggle2(){
                this.xianshi2=!this.xianshi2
            },
            toggle3(){
                this.xianshi3=!this.xianshi3
            },
            toggle4(){
                this.xianshi4=!this.xianshi4;
                this.nihao()
                if(this.xianshi4==false){
                    this.text='展开标签+'
                }
            },
            nihao(){
                var _this=this
                _this.text='收起标签-'
            },
            wxcSearchbarCancelClicked(){
                this.fouse=false
            },
            wxcSearchbarInputOnInput (e) {
                this.value = e.value;
            },
            biaoqianClick(e,index){
              this.mybiaoqiao.push(e);
              this.goodsList.splice(index,1)
               this.text_my=''
               this.xianshi_biao=false
            }
        }
    }
</script>

<style scoped>
    .search{
        width:700px;
        height: 80px;
        text-align: center;display:flex;flex-direction:row;margin-left: 25px;
        margin-top:20px;
    }
    .searchBox{
        width:490px;
        height:80px;
        border-color: #4fbfff;
        border-width:2px;tint-color:red;
        border-radius:5px;
    }
    .btn{
        width:200px;
        height:80px;
        cursor: pointer;color: #fff;
        font-size:40px;background-color: #4fbfff;line-height:80px;justify-content: center;align-items: center;
        text-align: center;
        border-radius: 5px;
        margin-left: 10px;
    }
 .body-body{
     width: 700px;background-color:#fff;height: auto;
     margin-top:0px;margin-left: 25px;
 }
    .body-hd{
        width:650px;min-height:60px;display: flex;flex-direction: row;margin-left:25px;color: #fff;
        flex-wrap: wrap;
    }
    .hd-text{
        width: 150px;height:60px;
        margin-left: 12.5px;background-color:#009ff0;
        text-align: center;line-height: 60px;margin-top:10px;border-radius:10px;color: #fff;
    }
    .body-conent{
        width: 700px;min-height:206px;
        /*background-color: rgba(13, 8, 7, 0.23);*/
    }
    .biao-text{
        color:black !important;
        width:300px;height:60px;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;text-decoration: underline;
        margin-left:200px;
    }
    .big-text{
        width:250px;height: 100px;background-color:#009ff0;
        border-radius: 10px;line-height: 100px;text-align: center;color: #fff;
    }
    .big-item{
        width: 700px;min-height: 100px;margin-left:0px;margin-top:-11px;
        display:flex;flex-wrap: wrap;flex-direction: row;color: #fff
    }
    .big-item-text{
        width:200px;height:75px;background-color:#009ff0;margin-top:25px;margin-left:25px;
        line-height:75px;text-align: center;border-radius: 10px;color: #fff;
    }
    .body-conent-item{
        /*border-bottom-color: #fff;*/
       margin-top:10px;
    }
</style>